<!--
 * @Author: 王灿
 * @Date: 2019-10-27 00:40:05
 * @LastEditTime: 2019-11-26 22:05:06
 * @Description: 忘记密码
 * @FilePath: \scarlet-sparrow-admin\src\views\login\forget-form\index
-->
<template>
  <el-form class="forget-form">
    <!-- 步骤条 -->
    <el-steps align-center :active="active" finish-status="success">
      <el-step title="验证手机号"></el-step>
      <el-step title="验证码"></el-step>
      <el-step title="修改密码"></el-step>
    </el-steps>
    <!-- 手机号 -->
    <el-form-item class="forget-form__mobile" prop="mobile" v-if="active === 2">
      <el-input
        type="tel"
        v-model="mobile"
        placeholder="请输入手机号"
        autocomplete="off"
        maxlength="11"
        clearable
        @blur="validatePhone(mobile)"
      ></el-input>
    </el-form-item>
    <!-- 验证码 -->
    <el-form-item class="forget-form__code" prop="code" v-if="active === 2">
      <el-input
        type="tel"
        v-model="code"
        placeholder="请输入验证码"
        autocomplete="off"
        maxlength="6"
        clearable
        @blur="validateCode(code)"
      ></el-input>
      <span class="forget-form__code-get" v-if="isCheckCode">{{ time }}s重新发送</span>
      <span class="forget-form__code-get" v-else @click="onSendCode">{{ timeTitle }}</span>
    </el-form-item>
    <!-- 密码 -->
    <el-form-item class="forget-form__pass" prop="password1" v-if="active === 3">
      <el-input
        type="password"
        v-model="password1"
        placeholder="请输入密码"
        autocomplete="off"
        clearable
        @blur="validatePass1(password1, password2)"
      ></el-input>
    </el-form-item>
    <el-form-item class="forget-form__pass2" prop="password2" v-if="active === 3">
      <el-input
        type="password"
        v-model="password2"
        placeholder="请确认密码"
        autocomplete="off"
        clearable
        @blur="validatePass2(password2, password1)"
      ></el-input>
    </el-form-item>
    <!-- 下一步 -->
    <el-form-item class="forget-form__btn">
      <el-button type="primary" @click="onJumpSubmit" :loading="isLoading" v-if="active !== 3">下一步</el-button>
      <el-button type="primary" @click="onSubmit" :loading="isLoading" v-if="active === 3">确定修改</el-button>
      <div class="forget-form__btn-forget">
        <p>
          已有账号，
          <span class="forget-form__btn-forget-form" @click="onChangeFlag">立即登录</span>
        </p>
        <p>
          <span class="forget-form__btn-forget-form" @click="onJumpPrev" v-if="active === 3">上一步</span>
        </p>
      </div>
    </el-form-item>
  </el-form>
</template>

<script>
import { storageSetItem, storageGetItem } from '@/utils/index.js'
import { getCheckCode, resetPwd } from '@/api/login.js'
export default {
  name: 'ForgetForm',
  data() {
    return {
      active: 2,
      mobile: '',
      isPhone: false,
      code: '',
      isCode: false,
      isCheckCode: false,
      password1: '',
      password2: '',
      isPassword1: false,
      isPassword2: false,
      isLoading: false,
      errMsg: '',
      lv: 0,
      time: 60,
      timeTitle: '获取验证码'
    }
  },
  created() {
    this.isPhone = true
    if (storageGetItem('mobile')) {
      this.mobile = storageGetItem('mobile')
    } else {
      this.mobile = '18674835226'
    }
  },
  watch: {
    // 监听错误消息
    errMsg() {
      this.onErrorMsg(this.errMsg)
    }
  },
  methods: {
    // 校验手机号码格式
    validatePhone(value) {
      if (!value) {
        this.isPhone = false
        this.errMsg = '请输入手机号'
        return false
      } else {
        const tel = /^1[3456789]\d{9}$/
        if (tel.test(value)) {
          this.isPhone = true
          return true
        } else {
          this.isPhone = false
          this.errMsg = '手机号格式不正确'
          return false
        }
      }
    },
    // 校验验证码
    validateCode(value) {
      if (value === '') {
        this.errMsg = '请输入验证码'
        this.isCode = false
        return false
      } else {
        this.isCode = true
        return true
      }
    },
    // 校验密码
    validatePass1(value, newValue) {
      // 判断密码为空
      if (value === '') {
        this.errMsg = '请输入密码'
        this.isPassword1 = false
        return false
      }
      // 判断确认密码是否为空
      if (newValue === '') {
        this.lv = 0 // 密码强度等级
        if (value.length >= 6 && value.length <= 20) {
          if (value.match(/[a-z]/g)) {
            this.lv++
          } // 含有小写字母
          if (value.match(/[A-Z]/g)) {
            this.lv++
          } // 含有大写字母
          if (value.match(/[0-9]/g)) {
            this.lv++
          } // 含有数字
          if (
            value.match(/[\-\_\,\!\|\~\`\(\)\#\$\%\^\&\*\{\}\:\;\"\L\<\>\?]/g)
          ) {
            this.lv++
          } // 含有特殊字符
          if (this.lv >= 1) {
            // 满足其中一个,查询密码强度
            this.isPassword1 = true
            return true
          } else {
            this.isPassword1 = false
            this.errMsg = '密码应为6~20位，数字、字母、符号一种及以上组合'
            return false
          }
        } else {
          this.isPassword1 = false
          this.errMsg = '密码应为6~20位，数字、字母、符号一种及以上组合'
          return false
        }
      } else {
        if (value === newValue) {
          this.lv = 0 // 密码强度等级
          if (value.length >= 6 && value.length <= 20) {
            if (value.match(/[a-z]/g)) {
              this.lv++
            } // 含有小写字母
            if (value.match(/[A-Z]/g)) {
              this.lv++
            } // 含有大写字母
            if (value.match(/[0-9]/g)) {
              this.lv++
            } // 含有数字
            if (
              value.match(/[\-\_\,\!\|\~\`\(\)\#\$\%\^\&\*\{\}\:\;\"\L\<\>\?]/g)
            ) {
              this.lv++
            } // 含有特殊字符
            if (this.lv >= 1) {
              // 满足其中一个,查询密码强度
              this.isPassword1 = true
              return true
            } else {
              this.isPassword1 = false
              this.errMsg = '密码应为6~20位，数字、字母、符号一种及以上组合'
              return false
            }
          } else {
            this.isPassword1 = false
            this.errMsg = '密码应为6~20位，数字、字母、符号一种及以上组合'
            return false
          }
        } else {
          this.isPassword1 = false
          this.errMsg = '两次输入的密码不一致'
          return false
        }
      }
    },
    // 校验密码
    validatePass2(value, oldVal) {
      if (value === '') {
        this.errMsg = '请输入密码'
        this.isPassword2 = false
        return false
      } else {
        if (value === oldVal) {
          this.lv = 0 // 密码强度等级
          if (value.length >= 6 && value.length <= 20) {
            if (value.match(/[a-z]/g)) {
              this.lv++
            } // 含有小写字母
            if (value.match(/[A-Z]/g)) {
              this.lv++
            } // 含有大写字母
            if (value.match(/[0-9]/g)) {
              this.lv++
            } // 含有数字
            if (
              value.match(/[\-\_\,\!\|\~\`\(\)\#\$\%\^\&\*\{\}\:\;\"\L\<\>\?]/g)
            ) {
              this.lv++
            } // 含有特殊字符
            if (this.lv >= 1) {
              // 满足其中一个,查询密码强度
              this.isPassword2 = true
              return true
            } else {
              this.isPassword2 = false
              this.errMsg = '密码应为6~20位，数字、字母、符号一种及以上组合'
              return false
            }
          } else {
            this.isPassword2 = false
            this.errMsg = '密码应为6~20位，数字、字母、符号一种及以上组合'
            return false
          }
        } else {
          this.isPassword2 = false
          this.errMsg = '两次输入的密码不一致'
          return false
        }
      }
    },
    // 获取验证码
    onSendCode() {
      if (!this.isPhone) {
        this.errMsg = '手机号格式不正确'
      } else {
        this.isCheckCode = false
        getCheckCode({
          mobile: this.mobile
        }).then(res => {
          this.isCheckCode = true
          this.time = 60
          this.$notify.success({
            title: '提示',
            message: '发送' + res.data
          })
          let timer = setInterval(() => {
            --this.time
            if (this.time <= 0) {
              this.isCheckCode = false
              clearInterval(timer)
            }
          }, 1000)
        })
      }
    },
    // 下一步
    onJumpSubmit() {
      if (this.mobile && this.code) {
        this.active += 1
      }
    },
    // 上一步
    onJumpPrev() {
      this.active -= 1
    },
    // 提交
    onSubmit() {
      if (this.isPhone && this.isCode && this.isPassword1 && this.isPassword2) {
        resetPwd({
          mobile: this.mobile,
          checkCode: this.code,
          loginPwd: this.password1
        }).then(res => {
          storageSetItem('mobile', this.mobile)
          storageSetItem('pwd', this.password1)
          this.$notify.success({
            title: '提示',
            message: '重置' + res.data
          })
          setTimeout(() => {
            this.onChangeFlag()
          }, 1000)
        })
      }
    },
    // 页面跳转
    onChangeFlag() {
      this.$emit('onChangeFlag', { isLogin: true, isForget: false })
    },
    // 错误消息
    onErrorMsg(errMsg) {
      this.$notify.error({
        title: '提示',
        message: errMsg
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.forget-form {
  width: 430px;
  height: 320px;
  box-shadow: 0 0 1px 1px #ddd;
  background: $navBarTitle;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -270px;
  margin-top: -200px;
  border-radius: 6px;
  padding: 40px;
  // 步骤条
  .el-steps {
    &.el-steps--horizontal {
      @include flex;
      flex-wrap: nowrap;
    }
  }
  // 手机号
  .forget-form__mobile,
  .forget-form__pass {
    margin-top: 50px;
  }
  // 按钮
  .forget-form__btn {
    margin-top: 30px;
    .el-form-item__content {
      button {
        width: 100%;
      }
      .forget-form__btn-forget {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        p {
          .forget-form__btn-forget-form {
            color: $base-font-color;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>

<style lang="scss">
.forget-form {
  .el-input__inner {
    height: 40px;
  }
  .el-input__suffix {
    height: 40px;
  }
  .el-step__title {
    font-size: 14px;
    font-weight: normal;
  }
  // 验证码
  .forget-form__code {
    .el-form-item__content {
      @include row;
    }
    .forget-form__code-get {
      display: inline-block;
      text-align: center;
      cursor: pointer;
    }
  }
  .forget-form__btn {
    margin-top: 30px;
    .el-form-item__content {
      @include column;
    }
  }
}
</style>
